/**
 * 学习目标：事件处理
 */
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
  render() {
    return (
      <div>
        {/* 1. onClick接收的一定是一个函数，不能是函数的调用 */}
        {/* 错误的写法：函数的调用，会直接执行 */}
        {/* <button onClick={alert('aaa')}>点我一下</button> */}
        {/* 正确的写法： */}
        <button onClick={() => alert('aaa')}>点我一下</button>
        <button onClick={(e) => console.log(e)}>点我一下,获取事件对象</button>
        {/* 2. 绑定一个函数, 通过this去访问对应的方法 */}
        <button onClick={this.handleClick}>点我一下</button>
        {/* 1. 通过形参获取事件对象 */}
        <button onClick={this.handleClick2}>点击获取事件对象</button>

        {/* 不要讲这个，要涉及到this指向问题 */}
        {/* 2. 需要多个参数的时候, 将function再包一层 */}
        <button onClick={this.handleClick4}>点击获取事件对象</button>
        {/* 2.2 更简便的写法 */}
        <button onClick={(e) => this.handleClick3(e, 'hello React')}>
          点击获取事件对象
        </button>
      </div>
    );
  }

  handleClick() {
    alert('aaa');
  }

  handleClick2(e) {
    console.log(e, '事件对象');
  }

  handleClick3(e, msg) {
    console.log(msg);
    console.log(e, '事件对象');
  }

  handleClick4 = (e) => {
    this.handleClick3(e, 'hello React');
  };
}

ReactDOM.render(<Hello />, document.getElementById('root'));
